<template>
    <div ref="elscrollbar" class="el-scrollbar-main" v-show="pageShow">
        <div class="container">
            <div class="head-main">
                <div class="login-box">
                    <img :src="$axios.defaults.baseURL+webSiteSetings.websiteLogo" alt="" class="logo" @click="goMain">

                    <div class="company_name">
                      <span class="main-title">{{webSiteSetings.websiteName}}</span>
                      <span class="text">适用场景:企业培训 - 职业培训 - 继续教育</span>
                    </div>

                </div>

                <div class="re-data">
                    <div class="inter">
                        <span class="text">简</span>
                        <span class="text">繁</span>
                        <span class="text">EN</span>
                    </div>
                    <div class="hand" v-show="!isLogin">
                        <div class="login-button" @click="goLogin">登录</div>
                        <div class="re-button" @click="goPage('/login?type=register')">注册</div>
                    </div>

                    <div class="hand" v-show="isLogin" style="white-space:nowrap;">
                        <div class="login-button1" @click="goPage('/home')">{{userData.name || userData.nickName}}</div>
                        <div class="re-button1" @click="loginOut">退出</div>
                    </div>
                </div>
            </div>

            <div class="menu-box">
                <div class="main" >
                    <span class="name iconfont"  v-for="(item,index) in menuList" :class="[item.icon,item.addClass]" @click="select(index)">{{item.name}}</span>
                </div>
            </div>

            <nuxt-child class="allContent" keep-alive :indexData="indexData" @loginAfter="loginAfter" @getStatus="getStatus"></nuxt-child>

            <div class="footer " style="padding-top:40px">
                <div class="footer-content">
                    <div class="content-item">
                        <h3 class="title">关于我们</h3>
                        <p class="content">{{webSiteSetings.aboutUsText}}</p>
                    </div>
                    <div class="content-item" style="float:right;width:300px">
                        <h3 class="title">客服热线  <span class="phone">{{webSiteSetings.phone}}</span></h3>
                        <!-- <p class="phone">{{setObj.phone}} <span>{{setObj.time}}</span></p>
                        <div class="share iconfont iconweibo"></div>
                        <div class="share iconfont iconweixin"></div> -->
                        <div class="img-box">
                            <div class="item">
                                <img :src="$axios.defaults.baseURL+webSiteSetings.weixin" alt="">
                                <span class="text">微信公众号</span>
                            </div>
                            <div class="item">
                                <img :src="$axios.defaults.baseURL+webSiteSetings.apk" alt="">
                                <span class="text">移动版访问</span>
                            </div>
                        </div>
                    </div>
                    <div style="clear:both;"></div>
                                       <div class="company-data">

                                        </div>
                </div>
            </div>
            <div class="footer">
                <div class="footer-content" style="margin: 10px auto;">
                    <div class="company">{{webSiteSetings.copyright}} 版权所有</div>
                    <div class="record">备案号:{{webSiteSetings.recordNumber}}</div>
                    <div style="clear:both;"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import'../assets/css/style.less'
import'../assets/css/fonts/iconfont.css'
import'../assets/css/fonts3/iconfont.css'
import Cookies from 'js-cookie'
import { Notification } from 'element-ui';
export default {
    components: {

    },
    data(){
        return{
            show:true,
            manShow:true,
            login:false,
            photo:'',
            description:'',
            pageShow:false,
            keywords:'',
            isLogin:false,
            imgUrl:'',
            isImg:true,
            input:'',
            vipFlag:false,
            logo:"http://www.ccopyright.com.cn/tpl/templates/M001/img/logo.gif",
            list:[],
            setObj:{},
            content:{},
            bannerList:[],
            favicon:'',
            timer:null,
            webSiteSetings:{},
            timer:null,
            indexData:{},
            userData:{},
            menuList:[
                {name:'首页',icon:'iconindex-copy',addClass:'active',path:'/index'},
                {name:'全部课程',icon:'iconxuexi',addClass:'',path:'/allCourse'},
                {name:'点播课程',icon:'iconxuexi',addClass:'',path:'/dbcourse'},
                {name:'PPT课程',icon:'icon-file-ppt',addClass:'',path:'/ppt'},
                {name:'面授课程',icon:'iconicon-test',addClass:'',path:'/face_course'},
                {name:'套餐课程',icon:'icontaocan',addClass:'',path:'/meal_course'},
                {name:'关于我们',icon:'iconguanyu',addClass:'',path:'/about'},
            ],
        }
    },
    async asyncData( {store, app,redirect}) {
        // redirect('/index')
        // this.$router.push("/index")

    },
    beforeCreate(){

    },

    created(){
        if(Cookies.get("token") && Cookies.get('userData')){
            this.isLogin = true;

            this.userData = JSON.parse(Cookies.get('userData'));
        }
        this.getData();
    },
    watch:{
        loginChange(){
            console.log(1)
            if(Cookies.get("token")){
                this.login = true;
            }
            else{
                this.login = false;
            }
        },
    },
    computed:{
        loginChange(){
            return Cookies.get("token");
        },
    },
    mounted(){
    },
    head() {
        return {
          // title: '首页',
          meta: [
            {
              hid: 'description',
              name: 'description',
              content: this.description
            },
            {
              hid: 'keywords',
              name: 'keywords',
              content: this.keywords
            },
          ],
          link: [
              {rel: 'icon', type: 'image/x-icon', href: this.favicon}
          ]
        }
    },
    methods:{
        goLogin(){
          this.$router.push("/login?type=login&go=0");
        },
        getStatus(obj){
            let that = this;
            this.getStatusPay(obj);
            clearInterval(that.timer);
            that.timer = null;
            this.timer = setInterval(() =>{
                that.getStatusPay(obj);
            }, 5000);
            setTimeout(()=>{
                clearInterval(that.timer);
                that.timer = null;
            },10*60*1000)
        },
        getStatusPay(obj){
            let that = this;
            this.$axios.$get("/f/findOrderTypeByNo?orderNo="+obj.no)
            .then(function (response) {
                if(response.data){
                    clearInterval(that.timer);
                    that.timer = null;
                    Notification.success({
                        title:'提示',
                        message:"您已支付成功"
                    });
                    that.$router.push("/dbcourse_content/"+obj.id);
                }
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
        },
        getData(){
            let that = this;
            this.$axios.$get("/f/index")
            .then(function (response) {

                that.indexData = response.data;
                that.webSiteSetings = response.data.webSiteSetings;
                that.pageShow = true;

            })
            .catch(function (error) {
                  // handle error
                  console.log(error);
            })
        },
        goPage(url){
            console.log(999)
            this.$router.push(url);
        },

        select(index){
            this.menuList.forEach((item,i)=>{
                if(index==i){
                    item.addClass = "active";
                    this.$router.push(item.path);
                }
                else{
                    item.addClass = ""
                }
            })
        },
        isChange(){
            console.log(777111)
            this.isImg = false;
        },
        goSearch(){
            if(this.input==""){
                Notification.success({
                    title:'提示',
                    message:"请输入搜索内容"
                });
                return;
            }
            this.$router.push("/main/search/"+this.input)
        },
        loginAfter(){
            this.isLogin = true
            this.userData = JSON.parse(Cookies.get("userData"));

        },
        noLogin(){
            this.login = false;
        },
        goTeacher(){
            this.$router.push("/teacherLogin")
        },
        goR(){
            this.$router.push("/register")
        },
        goL(type){
            this.$router.push("/login/"+type)
        },
        goOut(item){
            if(item.url!=""){
                window.open("http://"+item.url);
            }
        },
        getStatus(obj){
            let that = this;
            this.getStatusPay(obj);
            this.timer = setInterval(() =>{
                that.getStatusPay(obj);
            }, 5000);
            setTimeout(()=>{
                clearInterval(that.timer);
                that.timer = null;
            },10*60*1000)
        },
        getStatusPay(obj){
            let that = this;
            this.$axios.$get("/f/order/findOrderTypeByNo?orderNo="+obj.no)
            .then(function (response) {
                if(response.data){
                    clearInterval(that.timer);
                    that.timer = null;
                    Notification.success({
                        title:'提示',
                        message:"您已支付成功"
                    });
                    that.$router.push("/main/movieContent/"+obj.id);
                }
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
        },
        imgChange(url){
            this.imgUrl = url;
        },
        getSeting(){
            let that = this;
            this.$axios.$get("/f/idx/index")
            .then(function (response) {
                let data = response.data;
                let obj = {};
                obj.setIngs = data.educationSetings;
                obj.list = data.educationFriendshipLinkList;
                that.setObj = obj.setIngs;
                that.description = data.educationSetings.websiteDesc;
                that.keywords = data.educationSetings.keyword;
                that.favicon = "http://www.jzcqedu.com:8080"+data.educationSetings.websiteIco;
                console.log(that.favicon)
                Cookies.set("description",that.description);
                Cookies.set("keywords",that.keywords);
                Cookies.set("favicon",that.favicon);
                that.list = obj.list;
                //that.logo ="http://www.jzcqedu.com:8080"+ data.educationSetings.websiteLogo;
                let list = data.bannerList;
                list.forEach((item,i)=>{
                    item.pictureUrl = "http://www.jzcqedu.com:8080"+item.pictureUrl;
                });
                that.bannerList = list;

            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
        },
        goMain(){
            this.$router.push("/main/index");
        },
        goCenter(){
            if(Cookies.get("type")=="student"){
                this.$router.push("/center/mycenter");
            }
            else{
                this.$router.push("/teacherAdmin/teacherData");
            }
        },
        loginOut(){
            let that = this;
            this.$confirm('请确认是否退出?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

                this.$axios.$post("/f/logout")
                .then(function (response) {
                    Cookies.remove("userData");
                    Cookies.remove("token");
                    Cookies.set("login","no",{ expires: 1 });
                    that.isLogin = false;
                    if(that.$route.meta.isLogin){
                        that.$router.push("/index")
                    }
                    //that.$router.push("/login/"+Cookies.get("type"));

                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                })
            }).catch(() => {

            });
        }
    }
}
</script>

<style lang="less" scoped>
.clear{
    clear:both
}
.disabled{
  background-color:#ccc !important;
}
.nosee{
  background-color:#ccc !important;
}
    .none-shaow{
        visibility:hidden;
    }
    .fill-active{
        color:#000000 !important;
    }

    .study-pagination{
        margin:50px  auto;
    }
    .el-scrollbar-main{
      width:100%;
      height:100%;
      .course-item{
                width:295px;
                background:#fff;
                margin-top:20px;
                padding-bottom:10px;
                cursor:pointer;
                min-height:240px;
                box-shadow:0 2px 10px #d8d8d8;
                float:left;
                margin-right:23px;
                img{
                    width:100%;
                    height:170px;
                    display:block;
                }
                .title{
                    width:100%;
                    display:block;
                    margin-top:5px;
                    height:30px;
                    line-height:30px;
                    padding:0 12px;
                    box-sizing:border-box;
                    font-size:17px;
                    color:#444444;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .box{
                    width:100%;
                    box-sizing:border-box;
                    padding:0 12px;
                    height:30px;
                    .quxiao{
                          display: block;
                          padding: 0 10px;
                          margin-top: 2px;
                          height: 25px;
                          float: right;
                          line-height: 23px;
                          box-sizing: border-box;
                          border: 1px solid #4c87f4;
                          border-radius: 5px;
                          color: #4c87f4;
                          margin-right:5px;
                    }
                    .name{
                        line-height:30px;
                        float:left;
                        font-size:15px;
                        color:#444444;
                    }
                    .time{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        color:#888888;
                    }
                    .money{
                        line-height:30px;
                        font-size:22px;
                        color:#ff5924;
                        float:left;
                    }
                    .iconbofang2{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        margin-right:5px;
                        color:#4c87f4;
                    }
                    .iconbofang2:before{
                        margin-right:5px;
                    }
                    .iconwodeicon:before{
                        margin-right:5px;
                        font-size:18px;
                    }
                    .iconwodeicon{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        color:#ff541e;
                    }
                }
            }

      .el-scrollbar__thumb{
        background-color: rgba(0,0,0,.7);
      }
    }
    .container{
        width:100%;

        .allContent{
          width:100%;
         float: left;
        }
        .footer{
            width:100%;
            background:#0076ca;
            float:left;
            .footer-content{
                width:1250px;
                margin:0 auto;
                // padding-bottom:10px;
                .company{
                    margin: 0!important;
                    line-height:30px;
                    text-align:center;
                    font-size:14px;
                    color:#ffffff;
                    float:left;
                    width:100%;
                    // margin-top:20px;
                }
                .record{
                  margin: 0px !important;
                    line-height:30px;
                    text-align:center;
                    font-size:14px;
                    float:left;
                    color:#ffffff;
                    width:100%;
                }
                .company-data{
                    width:100%;
                    float:left;
                    margin-top:50px;
                    padding-bottom:10px;
                    border-bottom:1px solid #03a9f4;
                    .name{
                        width:100%;
                        display:block;
                        line-height:40px;
                        text-align:center;
                        font-size:16px;
                        color:#ffffff;
                    }
                    ul{
                        margin:0 auto;
                        height:40px;
                        display: table;
                        li{
                            line-height:40px;
                            float:left;
                            margin-right:20px;
                            font-size:16px;
                            cursor:pointer;
                            color:#ffffff;
                        }
                        li:last-child{
                            margin-right:0;
                        }
                    }
                }
                .content-item{
                    float:left;
                    .title{
                        line-height:30px;
                        font-size:22px;
                        color:#ffffff;
                        font-weight:500;
                        margin-bottom:15px;
                        span{
                            font-size:20px;
                            margin-left:10px;
                            color:#ffffff;
                        }
                    }
                    .img-box{
                        // float:right;
                        .item{
                            width:100px;
                            margin-right:20px;
                            float:left;
                            img{
                                width:100px;
                                height:100px;
                                display:block;
                            }
                            .text{
                                line-height:30px;
                                margin-top:10px;
                                font-size:18px;
                                color:#ffffff;
                                text-align:center;
                                display:block;
                            }
                        }
                    }
                    .type{
                        line-height:35px;
                        font-size:16px;
                        color:#ffffff;
                        display:block;

                    }
                    .phone{
                        line-height:35px;
                        font-size:24px;
                        color:#979587;
                        margin-bottom:10px;
                        span{
                            font-size:12px;
                        }
                    }
                    .share{
                        width:30px;
                        height:30px;
                        border-radius:50%;
                        float:left;
                        margin-right:25px;
                        line-height:30px;
                        text-align:center;
                        font-size:20px;
                        color:#ffffff;
                    }
                    .iconweibo{
                        background:#00a6b5;
                    }
                    .iconweixin{
                        background:#2fa31b;
                    }
                    .content{
                        width:600px;
                        line-height:20px;
                        font-size:14px;
                        color:#ffffff;

                    }
                }
            }
        }
        .footer1{
            background:#eef1f3;
            .content-item{
                .title,.phone,.text{
                    color:#555555 !important;
                }
                .content{
                    color:#555555 !important;
                }
            }
            .footer-content{
                padding:40px 0 !important;

            }
        }
        .menu-box{
            width:100%;
            height:50px;
            background:#0076ca;
            .main{
                width:1250px;
                margin:0 auto;
                height:100%;
                display: flex;
                justify-content: center;
                .name{
                    padding:0 25px;
                    line-height:50px;
                    font-size:16px;
                    color:#ffffff;
                    cursor:pointer;
                    height:100%;
                    display:block;
                    float:left;
                    position:relative;
                }
                .active:after{
                    content:'';
                    width:70%;
                    height:3px;
                    background:#ffffff;
                    left:15%;
                    bottom:1px;
                    position:absolute;
                }
                .name:before{
                    margin-right:5px;
                    font-size:18px;
                    position:relative;
                    top:1px;
                }
                .iconzhibobofangshexiangjiguankanmianxing:before{
                    font-size:22px;
                }
                .iconicon-test:before{
                    font-size:22px;
                }
            }
        }
        .head-main{
            width:1250px;
            margin:0 auto;
            height:100px;
            position:relative;
            .login-box{
                float:left;
                position:absolute;
                top:50%;
                left:0;
                transform:translateY(-50%);
                // width:600px;
                height:70px;
                .company_name{
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  .main-title{
                      font-size:32px;
                      color:#0076ca;
                      float:left;
                  }
                  .text{
                      float:left;
                      font-size:16px;
                      color:#444444;
                  }
                }
                .logo{

                    height:60px;
                    margin-top:5px;
                    float:left;
                    width: 200px;
                    cursor:pointer;
                    margin-right:10px;
                }

            }
            .re-data{
                position:absolute;
                right:0;
                top:50%;
                transform:translateY(-50%);
                width:150px;
                .inter{
                    float:right;
                    height:12px;
                    width:100px;
                    .text{
                        float:left;
                        padding:0 5px;
                        display:none;
                        height:12px;
                        font-size:12px;
                        cursor:pointer;
                        line-height:12px;
                        color: #656363;
                        border-right: 1px #d2d2d2 solid;
                    }
                    .text:last-child{
                        border:0;
                    }
                }
                .hand{
                    margin-top:10px;
                    float:right;
                    .login-button{
                        display: block;
                        font-size: 16px;
                        color: #0053a2;
                        background-color: #fff;
                        width: 48px;
                        height: 28px;
                        text-align: center;
                        line-height: 26px;
                        border: 1px solid #0053a2;
                        border-radius: 3px;
                        margin-right:10px;
                        cursor:pointer;
                        float:left;
                    }
                    .login-button1{
                        width:auto;
                        box-sizing:border-box;
                        padding:0 12px;

                        display: inline-block;
                        font-size: 16px;
                        color: #0053a2;
                        background-color: #fff;
                        height: 28px;
                        line-height: 26px;
                        border: 1px solid #0053a2;
                        border-radius: 3px;
                        margin-right:10px;
                        cursor:pointer;
                    }
                    .re-button{
                        display: block;
                        font-size: 16px;
                        color: #ffffff;
                        background-color: #fff;
                        width: 48px;
                        height: 28px;
                        text-align: center;
                        line-height: 28px;
                        background-color:#0053a2;
                        border-radius: 3px;
                        cursor:pointer;
                        float:left;

                    }
                    .re-button1{
                        display: inline-block;
                        font-size: 16px;
                        color: #ffffff;
                        background-color: #fff;
                        width: 48px;
                        height: 28px;
                        text-align: center;
                        line-height: 28px;
                        background-color:#0053a2;
                        border-radius: 3px;
                        cursor:pointer;

                    }
                }
            }

            .search-main{
                float:right;
                margin-right:40px;
                height:100%;
                position:relative;
                .iconVIP{
                    position: absolute;
                    right: -10px;
                    top: 5px;
                    font-size: 20px;
                    color: #ffe100;
                }
                .head{
                    width:50px;
                    height:50px;
                    display:block;
                    margin-top:10px;
                    float:left;
                    margin-left:35px;
                    border-radius:50%;
                }
                .text{
                    line-height:40px;
                    float:left;
                    margin-left:35px;
                    font-size:16px;
                    color:#444444;
                    margin-top:15px;
                    cursor:pointer;
                }
                .search-box{
                    width:470px;
                    height:40px;
                    position:relative;
                    margin-top:15px;
                    border-radius:20px;
                    overflow:hidden;
                    box-sizing:border-box;
                    border:1px solid #dedede;
                    float:left;
                    .iconsousuo1{
                        width:20px;
                        height:20px;
                        display:block;
                        position:absolute;
                        top:10px;
                        right:10px;
                        line-height:20px;
                        z-index:9;
                        text-align:center;
                        font-size:20px;
                        color:#3e83ff;
                        cursor:pointer;
                    }
                    .el-input__inner{
                        border:0;
                        color:#444444;
                    }
                    input::-webkit-input-placeholder {
                        color: #444444;
                    }
                }
            }
        }
    }
    .el-scrollbar{
        min-height:80px;
    }
</style>
